<div class="sidebar_detail">
	<div class="tab-header">
		<div class="title">
			<i class="fa fa-home"></i>信息登记
		</div>
		<div class="tool">
			<button type="button" class="btn btn-default"
				ng-click="updateSupport.save()">
				<i class="fa fa-outdent"></i>保存
			</button>
		</div>
	</div>
	<ul class="nav nav-tabs" role="tablist" style="clear: both">
		<li class="active"><a data-target="#addBaseInfo" role="tab"
			data-toggle="tab">基本信息</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active">
		<embed id="RoutonReader" type="application/mozilla-npruntime-scriptable-plugin" width="1" height="1" />
			<form id="addVisitorForm" name="addVisitorForm" novalidate>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>照片:
							</label>
							<div class="col-md-4 col-sm-5">
								<IMG style="WIDTH: 102px; HEIGHT: 126px" id ="JPGPhotobuf" name=PhotoDisplay1>
							</div>
							<div class="col-md-4 col-sm-5">
								<IMG style="WIDTH: 102px; HEIGHT: 126px" id="capturePhoto"
									name="capturePhoto">
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
						<div class="row">
							<div class="col-md-12 form-horizontal">
								<div class="form-group">
									<label class="col-md-4 col-sm-2 control-label"> <span
										class="notNull">*</span>签发机关:
									</label>
									<div class="col-md-8 col-sm-10">
										<input id="agency" name="agency" type="text"
											class="form-control" ng-maxlength="32">
									</div>
								</div>
							</div>
							<div class="col-md-12 form-horizontal">
								<div class="form-group">
									<label class="col-md-4 col-sm-2 control-label"> <span
										class="notNull">*</span>有效日期:
									</label>
									<div class="col-md-8 col-sm-10">
										<input id="valid" name="valid" type="text" class="form-control">
									
									</div>
								</div>
							</div>
							<div class="col-md-12 form-horizontal">
								<div class="form-group">
									<label class="col-md-4 col-sm-2 control-label"> <span
										class="notNull">*</span>公民身份证号:
									</label>
									<div class="col-md-8 col-sm-10">
										<input id="cardsn" name="cardsn" type="text"
											class="form-control">
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>姓名:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="name" name="name" type="text"
									class="form-control">
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
					<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>出生日期:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="birthDay" name="birthDay" type="text"
									class="form-control"> 
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>民族:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="folk" name="folk" type="text"
									class="form-control">
							
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
							<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>安全模块号:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="samid" name="samid" type="text"
									class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>地址:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="address" name="address" type="text"
									class="form-control" >
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
							<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>身份证卡号:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="idCardSN" name="idCardSN" type="text"
									class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>性别:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="sex" name="sex" type="text"
									class="form-control">
							</div>
						</div>
					</div>
					
				</div>
				<div class="row">
				<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>编号:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="personNo" name="personNo" type="text" ng-model="entity.personNo"
									class="form-control" >
							</div>
						</div>
					</div>
				<div class="col-md-6 form-horizontal">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>联系方式:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="extend6" name="extend6" type="text" ng-model="entity.extend6"
									class="form-control" >
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>身高:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="extend1" name="extend1" type="text" class="form-control" ng-model="entity.extend1">
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>体重:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="extend2" name="extend2" type="text"
									ng-model="entity.extend2" class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>学历:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="workerTypeName" name="workerTypeName" type="text" class="form-control">
								<input name="workerType" type="hidden" class="form-control"
									ng-model="entity.workerType" required>
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
						<div class="form-group">
						<label class="col-md-4 col-sm-2 control-label"> <span
							class="notNull">*</span>婚史:
						</label>
						<div class="col-md-8 col-sm-10">
								<input id="projectNameA" name="projectNameA" type="text" class="form-control">
								<input name="projectCode" type="hidden" class="form-control"
									ng-model="entity.projectCode" required>
								
							</div>
					</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>配对状态:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="roleName" name="roleName" type="text" class="form-control">
								<input name="roleCode" type="hidden" class="form-control"
									ng-model="entity.roleCode" required>
								
							</div>
						</div>
					</div>
					<div class="col-md-6 form-horizontal">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>房车情况:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="teamName" name="teamName" type="text"
									class="form-control"> <input name="type" type="hidden"
									class="form-control" ng-model="entity.teamCode" required>

							</div>
						</div>
					</div> 
				</div>
<div class="row">
					<div class="col-md-6 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-md-4 col-sm-2 control-label"> <span
								class="notNull">*</span>工作:
							</label>
							<div class="col-md-8 col-sm-10">
								<input id="extend3Name" name="extend3Name" type="text" class="form-control" ng-model="entity.extend3Name">
								<input id="extend3" name="extend3" type="hidden" class="form-control" ng-model="entity.extend3">
							</div>
						</div>
					</div>

				</div>
				<div class="row">
					<div class="col-md-12 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-sm-2 control-label"> <span
								class="notNull">*</span>个人情况:
							</label>
							<div class="col-sm-10">
								<textarea id="description" name="description"
									class="form-control" rows="3"
									ng-model="entity.extend4" ng-maxlength="300" placeholder="爱好，性格特点，是否独生女"></textarea>
								
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-sm-2 control-label"> <span
								class="notNull">*</span>父母情况:
							</label>
							<div class="col-sm-10">
								<textarea id="extend7" name="extend7"
									class="form-control" rows="3"
									ng-model="entity.extend7" ng-maxlength="300" placeholder="父母身体情况，工作情况"></textarea>
								
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12 form-horizontal" style="margin-left: -26px;">
						<div class="form-group">
							<label class="col-sm-2 control-label"> <span
								class="notNull">*</span>择偶标准:
							</label>
							<div class="col-sm-10">
								<textarea id="description" name="description"
									class="form-control" rows="3"
									ng-model="entity.extend5" ng-maxlength="300" placeholder="收入情况，房车情况，父母情况，个人情况，禁忌，身高情况"></textarea>
							 
							</div>
						</div>
					</div>
				</div>
			</form>
			<div style="display: none" class="tailoring-container">
				<div class="tailoring-content">
					<div class="tailoring-content-one">
						<label title="上传图片" for="chooseImg" class="l2-btn choose-btn">
							<input type="file" accept="image/jpg,image/jpeg,image/png"
							name="file" id="chooseImg" class="hidden"
							onchange="selectImg(this)"> 本地上传
						</label> <label title="拍照" class="l2-btn choose-btn" id='capture'
							style="margin-left: 2%;">拍照</label> <label title="重拍"
							class="l2-btn choose-btn" id='takeAgain' style="margin-left: 2%;">重拍</label>
						<div class="close-tailoring" id="closeTailorId">×</div>
					</div>
					<div class="tailoring-content-two">
						<div class="tailoring-box-parcel">
							<video id="video" width="100%" height="100%" controls
								style="float: left;"></video>
							<canvas id="canvas" width="482px" height="448px"
								style="float: left;" hidden="hidden"></canvas>
							<div id="showImg" hidden="hidden"
								style="width: 100%; height: 100%;">
								<img id="tailoringImg">
							</div>
						</div>
						<div class="preview-box-parcel">
							<p>图片预览：</p>
							<div class="square previewImg"></div>
							<div class="circular previewImg"></div>
						</div>
					</div>
					<div class="tailoring-content-three">
						<button class="l2-btn cropper-reset-btn">复位</button>
						<button class="l2-btn cropper-rotate-btn">旋转</button>
						<button class="l2-btn cropper-scaleX-btn">换向</button>
						<button class="l2-btn sureCut" id="sureCut">确定</button>
					</div>
				</div>

		</div>
	</div>
</div>
<script language="javascript" type="text/javascript">
//var embed = document.getElementById('RoutonReader');
/* function byId(id){
	return document.getElementById(id);
} */

/* var isInit=false; */


</script>
		<script type="text/javascript">
        require(["Cropper", 
			        "css!CropperCss"],function(){
        	  //图像上传
        	 //弹出框水平垂直居中
            (window.onresize = function () {
                var win_height = $(window).height();
                var win_width = $(window).width();
                if (win_width <= 768){
                    $(".tailoring-content").css({
                        "top": (win_height - $(".tailoring-content").outerHeight())/2,
                        "left": 0
                    });
                }else{
                    $(".tailoring-content").css({
                        "top": (win_height - $(".tailoring-content").outerHeight())/2,
                        "left": (win_width - $(".tailoring-content").outerWidth())/2
                    });
                }
            })();


            //图像上传
            function selectImg(file) {
                if (!file.files || !file.files[0]){
                    return;
                }
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var replaceSrc = evt.target.result;
                    //更换cropper的图片
                    $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真

                }
                reader.readAsDataURL(file.files[0]);
                mediaStreamTrack && mediaStreamTrack.stop();
                $("#video").hide();
                $("#showImg").show();

            }
            //cropper图片裁剪
            $('#tailoringImg').cropper({
                aspectRatio: 1/1,//默认比例
                preview: '.previewImg',//预览视图
                guides: false,  //裁剪框的虚线(九宫格)
                autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
                movable: false, //是否允许移动图片
                dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
                movable: true,  //是否允许移动剪裁框
                resizable: true,  //是否允许改变裁剪框的大小
                zoomable: false,  //是否允许缩放图片大小
                mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
                touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
                rotatable: true,  //是否允许旋转图片
                crop: function(e) {
                    // 输出结果数据裁剪图像。
                }
            });

            //弹框
            $("#capturePhoto").on("click",function () {
                takeImg()
            });

            //旋转
            $(".cropper-rotate-btn").on("click",function () {
                $('#tailoringImg').cropper("rotate", 45);
            });
            //复位
            $(".cropper-reset-btn").on("click",function () {
                $('#tailoringImg').cropper("reset");
            });
            //换向
            var flagX = true;
            $(".cropper-scaleX-btn").on("click",function () {
                if(flagX){
                    $('#tailoringImg').cropper("scaleX", -1);
                    flagX = false;
                }else{
                    $('#tailoringImg').cropper("scaleX", 1);
                    flagX = true;
                }
                flagX != flagX;
            });

            //裁剪后的处理
            $("#sureCut").on("click",function () {
                var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
                var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                base64url=base64url.replace("\r","")
                $('#capturePhoto').attr('src',base64url);
                closeTailor();
            });
            //关闭裁剪框
            function closeTailor() {
                $(".tailoring-container").toggle();
                mediaStreamTrack && mediaStreamTrack.stop();
            }

            //访问用户媒体设备的兼容方法
            function getUserMedia(constraints, success, error) {
            	
                if (navigator.mediaDevices.getUserMedia) {
                    //最新的标准API
                    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
                } else if (navigator.webkitGetUserMedia) {
                    //webkit核心浏览器
                    navigator.webkitGetUserMedia(constraints,success, error)
                } else if (navigator.mozGetUserMedia) {
                    //firfox浏览器
                    navigator.mozGetUserMedia(constraints, success, error);
                } else if (navigator.getUserMedia) {
                    //旧版API
                    navigator.getUserMedia(constraints, success, error);
                }
            }

            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');
         
            let context = canvas.getContext('2d');
            var mediaStreamTrack
            function success(stream) {
                //兼容webkit核心浏览器
                let CompatibleURL = window.URL || window.webkitURL;
                //将视频流设置为video元素的源
                mediaStreamTrack = stream.getTracks()[0];
                //video.src = CompatibleURL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
            }

            function error(error) {
                alert('访问用户媒体设备失败,请尝试更换浏览器')
            }

            document.getElementById('capture').addEventListener('click', function () {
                context.drawImage(video, 0, 0, 480, 320);
                mediaStreamTrack && mediaStreamTrack.stop();
                $('#tailoringImg').cropper('replace', canvas.toDataURL("image/png"),false);//默认false，适应高度，不失真
                $("#video").hide();//隐藏拍照框
                $("#showImg").show()//将拍照结果显示
            })

            //请求拍照
            $("#takeAgain").bind("click", function(){
                takePhoto();
            });
            $("#closeTailorId").bind("click", function(){
            	closeTailor();
            });

            //开始拍照
            function takeImg(){
                $(".tailoring-container").toggle();
                takePhoto();
            }

            //请求摄像头
            function takePhoto() {
            
                
                if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                	
                    //调用用户媒体设备, 访问摄像头
                    getUserMedia({video : {width: 100, height: 100}}, success, error);
                    $("#showImg").hide();//隐藏拍照结果显示框
                    //$('#showImg').html('<img id="tailoringImg" hidden="hidden">')
                    $("#video").show();//开启拍照框
                } else {
                    alert('不支持访问用户媒体');
                }
            }
        	
        })
        </script>
			</div>
		</div>
	</div>
	<style>
.l2-btn {
	display: inline-block;
	outline: none;
	resize: none;
	border: none;
	padding: 5px 10px;
	background: #8C85E6;
	color: #fff;
	border: solid 1px #8C85E6;
	border-radius: 3px;
	font-size: 14px;
}

.l2-btn:hover {
	background: #8078e3;
	animation: anniu 1s infinite;
}

.l2-btn:active {
	box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset;
}

.hidden {
	display: none;
}

.tailoring-container, .tailoring-container div, .tailoring-container p {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.tailoring-container {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0;
	left: 0;
}

.tailoring-container .black-cloth {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #111;
	opacity: .9;
	z-index: 1001;
}

.tailoring-container .tailoring-content {
	position: absolute;
	width: 768px;
	height: 560px;
	background: #fff;
	/* z-index: 1002; */
	left: 0;
	top: 0;
	/* 水平垂直居中 浏览器版本号低的不支持transform */
	/*left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -weblit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);*/
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	padding: 10px;
}

.tailoring-content-one {
	height: 40px;
	width: 100%;
	border-bottom: 1px solid #DDD;
}

.tailoring-content .choose-btn {
	float: left;
}

.tailoring-content .close-tailoring {
	display: inline-block;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	background: #eee;
	color: #fff;
	font-size: 22px;
	text-align: center;
	line-height: 30px;
	float: right;
	cursor: pointer;
}

.tailoring-content .close-tailoring:hover {
	background: #ccc;
}

.tailoring-content .tailoring-content-two {
	width: 100%;
	height: 460px;
	position: relative;
	padding: 5px 0;
}

.tailoring-content .tailoring-box-parcel {
	width: 520px;
	height: 450px;
	position: absolute;
	left: 0;
	border: solid 1px #ddd;
}

.tailoring-content .preview-box-parcel {
	display: inline-block;
	width: 228px;
	height: 450px;
	position: absolute;
	right: 0;
	padding: 4px 14px;
}

.preview-box-parcel p {
	color: #555;
}

.previewImg {
	width: 200px;
	height: 200px;
	overflow: hidden;
}

.preview-box-parcel .square {
	margin-top: 10px;
	border: solid 1px #ddd;
}

.preview-box-parcel .circular {
	border-radius: 100%;
	margin-top: 10px;
	border: solid 1px #ddd;
}

.tailoring-content .tailoring-content-three {
	width: 100%;
	height: 40px;
	border-top: 1px solid #DDD;
	padding-top: 10px;
}

.sureCut {
	float: right;
}

@media all and (max-width: 768px) {
	.tailoring-container .tailoring-content {
		width: 100%;
		min-width: 320px;
		height: 460px;
	}
	.tailoring-content .tailoring-content-two {
		height: 360px;
	}
	.tailoring-content .tailoring-box-parcel {
		height: 350px;
	}
	.tailoring-container .tailoring-box-parcel {
		width: 100%;
	}
	.tailoring-container .preview-box-parcel {
		display: none;
	}
}
</style>